<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布产品</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/resource/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/resource/css/style0618.css"/>
    <script src="/resource/js/vendor.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div class="header">
    <h2><a class="back-btn" onclick="javascript:window.history.go(-1);"><span>发布产品</span></a></h2>
    <a class="nav-btn"></a>
    <ul class="nav-menu clearfix">
        <li><a href="http://3g.3158.cn/">创业项目</a></li>
        <li><a href="http://3g.3158.cn/brand/">品牌招商</a></li>
        <li><a href="http://m.8809.cn/">舌尖商机</a></li>
        <li><a href="http://m.3158.cn/app/chuangyebao/">客户端</a></li>
        <li><a href="">展会活动</a></li>
        <li><a href="">商机资讯</a></li>
        <li><a href="http://w.3158.cn/">创业问答</a></li>
        <li><a href="http://m.quan.3158.cn/">创业圈</a></li>
    </ul>
</div>
<div class="container">
    <div class="content96">
        <div class="public-list">
            <form action="" method="post">
                <p><input type="text" name="" placeholder="产品名称"/></p>
                <p class="up-img">
							<span>
								上传图片
							</span>
                    <img width="100%" src="/resource/img/test-head.png">
                </p>
                <div id="cropplus" class="cropimg">
                    <div class="uploadimg" id="uploadimg">
                        <input type="hidden" name="imgurl" value="">
                        <input type="hidden" name="imgwidth" value="">
                        <input type="hidden" name="imgheight" value="">
                        <input type="hidden" name="cropwidth" value="">
                        <input type="hidden" name="cropheight" value="">
                        <input type="hidden" name="cropX" value="">
                        <input type="hidden" name="cropY" value="">
                        <div class="loadimg"></div>
                        <div id="fine-uploader-wrapper">
                            <div class="qq-uploader-selector qq-uploader">
                                <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                                    <div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                                </div>
                                <div class="qq-upload-button-selector qq-upload-button">
                                    <div></div>
                                </div>

                                <div class="processing">
                                    <div><span>123</span>%</div>
                                </div>

                                <ul class="qq-upload-list-selector qq-upload-list">
                                    <li>
                                        <div class="qq-progress-bar-container-selector">
                                            <div class="qq-progress-bar-selector qq-progress-bar"></div>
                                        </div>
                                        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                                        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                                        <span class="qq-upload-file-selector qq-upload-file"></span>
                                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                                        <span class="qq-upload-size-selector qq-upload-size"></span>
                                        <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">取消</a>
                                        <a class="qq-upload-retry-selector qq-upload-retry" href="#">重试</a>
                                        <a class="qq-upload-delete-selector qq-upload-delete" href="#">删除</a>
                                        <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="bottomarea">
                        <a class="sure-btn mt20 mb20" id="setimg" >确认</a>
                    </div>
                </div>
                <textarea placeholder="产品描述"></textarea>
                <a class="sure-btn mt20 mb20" >确认发布</a>
            </form>
        </div>
    </div>
</div>
<style>
    .cropimg{
        overflow: hidden;
        position: relative;
        display: none;
    }
    .uploadimg{
        height: 400px;
        border: 1px solid #d2d2d2;
        margin-top: 20px;
        overflow: hidden;
        text-align: center;
        position: relative;

    }
    .loadimg img{
        width: 100%;
    }
    #fine-uploader-wrapper{
        position: relative;
    }

</style>
<link rel="stylesheet" href="/resource/css/jquery.cropbox.css">
<script src="/resource/js/jquery.cropbox.js"></script>
<script src="/resource/js/hammer.min.js"></script>

<!-- Fine Uploader jQuery JS file
====================================================================== -->
<script src="/resource/js/jquery.fine-uploader/jquery.fine-uploader.js"></script>
<script type="text/javascript">
    $(function(){
        var cropplus= new Hammer($('.up-img').get(0));
        var w =  $('.up-img').width();
        //添加事件
        cropplus.on("tap", function (e) {
            $('.uploadimg,.processing').height(w);
            $('.processing div').css('margin-top',(w-124)/2 + 'px');
            $('.public-list .qq-upload-button div').height(w);
            $('.cropimg').slideDown();

            /*$('.uploadimg img').cropbox({
                width: w,
                height: w,
                showControls:'never',
                zoom:80
            }, function() {
                //on load
            }).on('cropbox', function(e, data) {
                console.log('crop window: ' , data);
                $('input[name=cropX]').val(data.cropX);
                $('input[name=cropY]').val(data.cropY);
            });*/
        });

        //具体参数参考源码qq.FineUploaderBasic中的_options查看
        var uploader = new qq.FineUploader({
            element: document.getElementById("fine-uploader-wrapper"), //上传按钮
            request: {
                endpoint: '/mobile/upload/uploadFile/' //上传接口地址
            },
            multiple: false, //是否多个文件
            autoUpload: true, //是否支持上传
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'png'], //上传文件约束条件
                sizeLimit: 2048000 //bytes 2000KB
            },
            callbacks: {
                onSubmit: function(id, fileName) {
                    //文件开始提交
                    console.log(fileName,'文件开始提交');
                },
                onUpload: function(id, fileName) {
                    //文件开始上传
                    console.log(fileName,'文件开始提交');
                    $('.qq-upload-button ').hide();
                    $('.processing').show();
                },
                onProgress: function(id, fileName, loaded,  total) {
                    //文件正在上传
                    console.log(fileName,'已上传'+(loaded/total)*100+'%');
                    $('.processing div span').text(changeTwoDecimal((loaded/total)*100));
                },
                onComplete: function(id, fileName, responseJSON) {
                    //文件上传成功
                    $('.processing').hide();
                    console.log(fileName,'上传成功，返回信息为：',responseJSON);
                    $('input[name=imgurl]').val(responseJSON.filepath);
                    $('.loadimg').html('<img src="' + responseJSON.filepath + '">');
                    $('input[name=cropwidth]').val(w);
                    $('input[name=cropheight]').val(w);
                    $('.up-img span').text(fileName);
                    $('.loadimg img').cropbox({
                        width: w,
                        height: w,
                        showControls:'never',
                        zoom:80
                    }, function() {
                        //on load
                    }).on('cropbox', function(e, data) {
                        console.log('crop window: ' , data);
                        $('input[name=cropX]').val(data.cropX);
                        $('input[name=cropY]').val(data.cropY);
                        $('input[name=imgwidth]').val($('.cropImage').width());
                        $('input[name=imgheight]').val($('.cropImage').height());
                    });
                },
                onCancel: function(id, fileName) {
                    //取消文件上传
                    console.log('取消',fileName,'上传');
                    $('.loadimg').html('');
                    $('.cropimg').slideUp();
                    $('.qq-upload-button ').show();
                },
                onDeleteComplete: function(id, xhr, isError) {
                    //取消文件上传
                    console.log('nDeleteComplete');
                    $('.loadimg').html('');
                    $('.cropimg').slideUp();
                    $('.qq-upload-button ').show();
                }
            },
            messages: {
                noFilesError: '没有选中文件'
            },
            text: {
                formatProgress: "{percent}% of {total_size}",
                failUpload: "上传失败",
                waitingForResponse: "上传中...",
                paused: "暂停"
            },
            template: 'fine-uploader-wrapper', //ID
            debug: true
        });



            //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
            var hammersetimg = new Hammer(document.getElementById("setimg"));
            //添加事件
            hammersetimg.on("tap", function (e) {
                $('.cropimg').slideUp();
                //alert( 'cropX:' + $('input[name=cropX]').val() + ',cropY' + $('input[name=cropY]').val() + 'cropImage_widht : ' + $('.cropImage').width()+ 'cropImage_height : ' + $('.cropImage').height());
            });
        changeTwoDecimal= function changeTwoDecimal(floatvar)
        {
            var f_x = parseFloat(floatvar);
            if (isNaN(f_x))
            {
                alert('function:changeTwoDecimal->parameter error');
                return false;
            }
            var f_x = Math.round(floatvar*100)/100;
            return f_x;
        }

    });
</script>
</body>
</html>
